<template>
    <div id="app">
        <DynamicForm
            style="height: 100%;text-align: center"
            :formConfig="formConfig"
            :formData="formData"
            :isInsertOrUpdate=1
            :handleSubmitButton="submit"
            :getOptionFun="getOptionFun"
            :getRulesFun="getRulesFun"
            :uploadParameter="uploadParameter"
            :uploadPath="uploadPath"
            :uploadHeaders="uploadHeaders"
            :uploadSuccess="testChange"
            ref="dynamicForm"
            :testChange="testChange"
        >
            <template
                v-for="(formConfigItem, index) in formConfig._items.filter((item)=>{ return item.slotName||false})"
                v-slot:[formConfigItem.slotName]="{condition}">
                <component
                    :key=index
                    :is="formConfigItem.slotName"
                    :condition="condition"
                    :formData="formData"
                    :conditions="formConfig"></component>
            </template>
        </DynamicForm>
        <div v-for="(item) in testZhArray">
            <el-input v-model = "testZhObject[item.zh]" @focus="testFocus(item.zh)"></el-input>
        </div>
       <el-button @click="test"></el-button>
    </div>
</template>

<script>
import { rules } from './config/itemRules'
import { dynamicFormDemoConfig } from './config/DynamicFormDemoConfig'
import VerificationCode from './VerificationCode.vue'

export default {
    name: 'App',
    data() {
        return {
            formData: { conditon3: 'xx1,xx2', exchange: '00,01' },
            // 测试数据
            formConfig: dynamicFormDemoConfig,
            uploadParameter: {},
            uploadPath: 'http://10.187.162.36:8080/api/devops/vtmFileUpload',
            testZhArray: [{ zh: 'a1231' }, { zh: 'a456' }],
            testZhObject: {},
            testNum: 0,
            focusVal: '',
            uploadHeaders: { 'x-token': '12345' }
        }
    },
    components: {
        VerificationCode
    },
    watch: {
        testNum: function(val) {
            this.$set(this.testZhObject, this.focusVal, val.toString())
        }
    },
    mounted() {
        this.testZhObject = { a1231: '', a456: '' }
    },
    methods: {
        test() {
            this.testNum = this.testNum + 1
        },
        testFocus(val) {
            this.focusVal = val
        },
        submit(json) {
            const params = {
                tranCode: 'addVersionInfoService',
                version: '12312',
                versionDesc: '22222',
                path: '/padimpower/' + this.formData.upgradeFile[0].name
            }
            this.uploadParameter = {
                savePath: '/ftp/VTMRES/padimpower',
                serviceType: 'znwd',
                params: JSON.stringify(params)
            }
            this.$nextTick(() => {
                this.$refs.dynamicForm.uploadSubmit()
            })
        },
        getOptionFun(tranCode) {
            if (tranCode === 'queryExchange') {
                return JSON.parse('[\n' +
                    '    {\n' +
                    '      "value": "00",\n' +
                    '      "label": "深交所"\n' +
                    '    },\n' +
                    '    {\n' +
                    '      "value": "01",\n' +
                    '      "label": "上交所"\n' +
                    '    },\n' +
                    '    {\n' +
                    '      "value": "03",\n' +
                    '      "label": "港交所"\n' +
                    '    }\n' +
                    '  ]')
            } else if (tranCode === 'queryCity') {
                return JSON.parse('[\n' +
                    '    {\n' +
                    '      "value": "beijing",\n' +
                    '      "label": "北京市",\n' +
                    '      "children": [\n' +
                    '        {\n' +
                    '          "value": "beijing",\n' +
                    '          "label": "北京市",\n' +
                    '          "children": [\n' +
                    '            {\n' +
                    '              "value": "daxing",\n' +
                    '              "label": "大兴"\n' +
                    '            },\n' +
                    '            {\n' +
                    '              "value": "changping",\n' +
                    '              "label": "昌平"\n' +
                    '            },\n' +
                    '            {\n' +
                    '              "value": "changping",\n' +
                    '              "label": "通州"\n' +
                    '            }\n' +
                    '          ]\n' +
                    '        }\n' +
                    '      ]\n' +
                    '    },\n' +
                    '    {\n' +
                    '      "value": "hebei",\n' +
                    '      "label": "河北省",\n' +
                    '      "children": [\n' +
                    '        {\n' +
                    '          "value": "shijiazhuang",\n' +
                    '          "label": "石家庄",\n' +
                    '          "children": [\n' +
                    '            {\n' +
                    '              "value": "xinhuaqu",\n' +
                    '              "label": "新华区"\n' +
                    '            },\n' +
                    '            {\n' +
                    '              "value": "changanqu",\n' +
                    '              "label": "长安区"\n' +
                    '            },\n' +
                    '            {\n' +
                    '              "value": "qiaoxiqu",\n' +
                    '              "label": "桥西区"\n' +
                    '            }\n' +
                    '          ]\n' +
                    '        }\n' +
                    '      ]\n' +
                    '    }\n' +
                    '  ]')
            }
        },
        getRulesFun(ruleName) {
            return rules[ruleName]
        },
        testChange(value, oldValue) {
            console.log('abc')
        }
    }
}

</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>
